<template>
  <div class="contentBox">
    <el-page-header @back="goBack" content="到访登记"> </el-page-header>
    <div style="padding: 20px 0">
      <el-button type="primary" @click="addRow" size="small">增 行</el-button>
      <el-button type="primary" @click="addPeople" size="small"
        >提交并保存</el-button
      >
    </div>
    <div class="tableBox">
      <el-table
        :data="tableData"
        style="width: 100%; height: 100%; overflow: overlay"
        :row-class-name="rowClick"
      >
        <template
          ><div slot="empty">
            <img
              src="../../assets/img/empty.png"
              alt=""
              style="width: 80%"
            /></div
        ></template>
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="orderId" label="订单编号" v-if="false">
          <el-input v-model="scoped.row.orderId"></el-input>
        </el-table-column>
        <el-table-column prop="name" label="姓名">
          <template slot-scope="scoped">
            <el-input v-model="scoped.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="idcard" label="身份证">
          <template slot-scope="scoped">
            <el-input
              v-model="scoped.row.idcard"
              @blur="handleblur(scoped.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系方式">
          <template slot-scope="scoped">
            <el-input v-model="scoped.row.phone"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130" align="center">
          <template slot-scope="scoped">
            <i
              class="el-icon-remove"
              style="color: red; cursor: pointer"
              @click="handleDelete(scoped.row)"
              >移除</i
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
function Row() {
  return {
    // name: "王小虎",
    // identity: "441325115615223651",
    // phone:'15216515896'
    orderId: "",
    name: "",
    idcard: "",
    phone: "",
  };
}
export default {
  created() {
    this.getPeopleList();
  },
  data() {
    return {
      orderId: "",
      tableData: [
        // {
        //   date: "2016-05-02",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1518 弄",
        // },
        // {
        //   date: "2016-05-04",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1517 弄",
        // },
        // {
        //   date: "2016-05-01",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1519 弄",
        // },
        // {
        //   date: "2016-05-03",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1516 弄",
        // },
      ],
    };
  },
  methods: {
    handleblur(row) {
      const idReg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (idReg.test(row.idcard)) {
        // callback();
      } else {
        this.$message.warning("请填写正确的身份证");
        row.idcard = "";
      }
    },
    //获得当前行的数据
    rowClick({ row, rowIndex }) {
      row.index = rowIndex; //拿到的索引赋值给row的index,在这个表格中能拿到row的里面都会包含index
      return "row-remarks";
    },
    //移除列表中的数据
    async handleDelete(row) {
      console.log(row.index);
      //向后端发送删除请求
      var _this = this;
      this.$confirm("请确认是否确认移除访客？")
        .then(async (_) => {
          let param = {
            orderId: row.orderId,
            idcard: row.idcard,
          };
          let { data: res } = await this.$http.post(
            "banservice/guest/deleteguest",
            param
          );
          if (res.code == 20000) {
            this.$message.success("移除成功");
            let index = this.tableData.findIndex((fileItem) => {
              return fileItem.index === row.index;
            });
            this.tableData.splice(index, 1);
          } else {
            _this.$message({
              message: res.msg,
              type: "error",
            });
          }
          // this.getPeopleList();
        })
        .catch(() => {});
    },
    //获取列表数据i
    async getPeopleList() {
      let param = {
        orderId: this.$route.query.orderId,
      };
      let { data: res } = await this.$http.post(
        "banservice/guest/getguestbyorderid",
        param
      );
      this.tableData = res.data.list;
      console.log(res.data.list);
    },
    //确认添加游客
    addPeople() {
      var _this = this;
      this.$confirm("请确认是否确认添加访客？")
        .then(async (_) => {
          let { data: res } = await this.$http.post(
            "banservice/guest/addguest",
            this.tableData
          );
          if (res.code == 20000) {
            this.$message.success("操作成功");
          } else {
            _this.$message({
              message: res.msg,
              type: "error",
            });
          }
          this.getPeopleList();
        })
        .catch(() => {});
    },
    // 添加到访登记
    addRow() {
      let newRow = new Row();
      newRow.orderId = this.$route.query.orderId;
      this.tableData.push(newRow);
    },
    goBack() {},
  },
};
</script>

<style lang="less" scoped>
.contentBox {
  .tableBox {
    width: calc(100vw - 280px);
    height: 65vh;
  }
}
</style>